<template>
  <div class="goods-item" @click="itemClick">
    <img v-lazy="showImg" @load="imgLoad" />
    <p>{{ goodsItem.title }}</p>
    <div class="price">
      <span>{{ goodsItem.price }}</span>
      <img src="~@img/common/collect.svg" />
      <span>{{ goodsItem.cfav }}</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'goods-item',
    props: {
      goodsItem: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    computed: {
      showImg() {
        return this.goodsItem.image || this.goodsItem.show.img
      }
    },
    methods: {
      // 监听图片加载事件
      imgLoad() {
        this.$bus.$emit('imgLoad')
      },
      // 监听点击事件，跳转到详情页面
      itemClick() {
        this.$router.push({
          path: '/detail',
          query: { goodsID: this.goodsItem.iid }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .goods-item {
    width: 47%;
    margin-bottom: 5px;
    font-size: 12px;
    img {
      width: 100%;
      border-radius: 5px;
    }
    p {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  .price {
    text-align: center;
    :first-child {
      color: var(--color-tint);
    }
    img {
      width: 10px;
      margin: 0 3px;
    }
  }
</style>
